var w = document.body.clientWidth//页面高度
var h = document.body.clientHeight//页面宽度

//定义一个球

var arrBalls = []
for (var i = 0; i < 20; i++) {
    var ball = document.createElement('div')
    var random = Math.random()*70
    ball.style.width = random + 'px'//宽
    ball.style.height = random + 'px'//高
    ball.style.backgroundColor = Color()//背景色
    ball.style.position = 'absolute'//定位方式
    ball.style.left = Math.random()*(w-120)+'px'//left
    ball.style.top = Math.random()*(h-120)+'px'//right
    ball.style.borderRadius = '50%'//圆角
    ball.dataset['directX'] = Math.random()*10
    ball.dataset['directY'] = Math.random()*10
    document.body.appendChild(ball)
    arrBalls.push(ball)
}
function Color(){
    var random1 = Math.floor(Math.random()*255)
    var random2 = Math.floor(Math.random()*255)
    var random3 = Math.floor(Math.random()*255)
    var color =  'rgb(' + random1 + ',' + random2 + ',' + random3 + ')'
    ball.style.backgroundColor = color
    console.log(color) 
}



// var directX = 1
// var directY = 1

function move() {
    for (var i = 0; i < arrBalls.length; i++) {
        var ball = arrBalls[i]
        if (ball.offsetLeft + ball.offsetWidth >= w - 10) {//移到最右 改变方向
            ball.dataset['directX'] = -1
        }
        if (ball.offsetLeft <= 0) {//移到屏幕最左边的时候 改变方向
            ball.dataset['directX'] = 1
        }
        if (ball.offsetTop + ball.offsetHeight >= h - 10) {
            ball.dataset['directY'] = -1
        }
        if (ball.offsetTop <= 0) {//移动到顶部 改变方向
            ball.dataset['directY'] = 1
        }
        ball.style.left = ball.offsetLeft + ball.dataset['directX'] * 10 + 'px' //改变小球位置
        ball.style.top  = ball.offsetTop + ball.dataset['directY'] * 10 + 'px'
    }
    requestAnimationFrame(move)//动画帧调用
}
move()
//重置窗口大小事件
window.onresize = function () {  //改变窗口大小之后 重置w和h的值
    w = document.body.clientWidth
    h = document.body.clientHeight
}